<template>
  <!-- ContactReview 人脉审核  -->
  <PageContainer>
    <view class="container">
      <Tabs v-model="currentTab">
        <Header title="人脉审核" :is-box-shadow="false" :defaultSlotContentHeight="76">
          <TabNav tabBarColor="#2878FF" />
          <view class="disFlxJS px-25 py-10 borderBottom">
            <view
              v-for="(item, index) in orderAuditStateList"
              :key="index"
              class="statusTag"
              :class="{ select: parame.auditStatus === item.dictValue }"
              @click="changeSelect(item.dictValue)"
            >
              {{ item.dictLabel }}
            </view>
          </view>
        </Header>
        <TabsItem name="会内申请" :value="0" :unread="contactsUnread">
          <Paglist
            v-model="contactsData"
            :is-init-api="false"
            :parame="parame"
            @register="contactsReviewFormRegister"
            :is-show-loadmore="contactsData.length > 1"
            :scroll-top-bottom="200"
          >
            <template v-for="v in contactsData" :key="v.id">
              <ContactItem
                :item="{
                  id: v.id,
                  applylevelName: v.applylevelName,
                  applyUserName: v.applyUserName,
                  orgName: v.orgName,
                  leadingName: v.leadingName,
                  toOrgName: v.toOrgName,
                  phaseState: v.phaseState,
                  createTime: v.createTime,
                  auditStatus: v.auditStatus,
                  orderCode: v.orderCode,
                  auditUserId: v.auditUserId,
                  toAuditUserId: v.toAuditUserId,
                }"
                :ass-type="AssTypeEnum.INNER"
                @refresh="contactsReviewFormRefresh"
              />
            </template>
          </Paglist>
        </TabsItem>
        <TabsItem name="会外申请" :value="1" :unread="cooperationUnread">
          <Paglist
            v-model="cooperationData"
            :is-init-api="false"
            :parame="parame"
            @register="cooperationReviewFormRegister"
            :is-show-loadmore="cooperationData.length > 1"
            :scroll-top-bottom="200"
          >
            <template v-for="v in cooperationData" :key="v.id">
              <ContactItem
                :item="{
                  id: v.id,
                  applylevelName: v.applylevelName,
                  applyUserName: v.applyUserName,
                  orgName: v.orgName,
                  leadingName: v.leadingName,
                  toOrgName: v.toOrgName,
                  phaseState: v.phaseState,
                  createTime: v.createTime,
                  auditStatus: v.auditStatus,
                  orderCode: v.orderCode,
                  auditUserId: v.auditUserId,
                  toAuditUserId: v.toAuditUserId,
                }"
                :ass-type="AssTypeEnum.OUTSIDE"
                @refresh="cooperationReviewFormRefresh"
              />
            </template>
          </Paglist>
        </TabsItem>
      </Tabs>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  ContactReview  人脉审核  */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { provide, reactive, ref, watch } from 'vue';
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import ContactItem from './components/ContactItem.vue';

  import { contactsReviewList, cooperationList, sysConnectionAuditStatistics } from '@/api/admin';
  import dictionary from '@/utils/dictionary';
  import { useConList } from '@/components/Paglist/useConList';
  import type { ContactsReviewListResult } from '@/api/admin/types';
  import { onLoad } from '@/router';
  import { AssTypeEnum, OrderTypeEnum } from '@/enums/orderEnum';
  import { onPageScroll, onPullDownRefresh, onShow } from '@dcloudio/uni-app';
  const currentTab = ref(0);

  const orderAuditStateList = dictionary.getLocal('orderAuditState');

  const parame = reactive({
    auditStatus: '',
    orderType: OrderTypeEnum.SECRETARIAT,
  });

  const contactsData = ref<ContactsReviewListResult[]>([]);

  const [contactsReviewFormRegister, { refresh: contactsReviewFormRefresh }] = useConList({
    api: contactsReviewList,
  });

  const cooperationData = ref<ContactsReviewListResult[]>([]);

  const [cooperationReviewFormRegister, { refresh: cooperationReviewFormRefresh }] = useConList({
    api: cooperationList,
  });

  watch(currentTab, (val) => {
    contactsData.value = [];
    cooperationData.value = [];
    tabsChange(val);
  });

  function tabsChange(index: number) {
    switch (index) {
      case 0:
        !contactsData.value.length && contactsReviewFormRefresh();
        break;
      case 1:
        !cooperationData.value.length && cooperationReviewFormRefresh();
        break;
    }
  }

  const contactsUnread = ref(0);
  const cooperationUnread = ref(0);
  function getSysConnectionAuditStatistics() {
    sysConnectionAuditStatistics().then((r) => {
      contactsUnread.value = r.auditNumber;
      cooperationUnread.value = r.cooperationAuditNumber;
    });
  }

  onShow(() => {
    getSysConnectionAuditStatistics();
  });

  onPullDownRefresh(() => {
    getSysConnectionAuditStatistics();
  });

  onLoad(() => {
    tabsChange(currentTab.value);
  });

  const changeSelect = function (status: any) {
    parame.auditStatus = status;
    (currentTab.value && cooperationReviewFormRefresh()) || contactsReviewFormRefresh();
  };

  provide('api', void 0);
  onPageScroll(() => {});
</script>

<style lang="scss" scoped>
  $color-primary: #2878ff;

  .statusTag {
    font-size: 28rpx;
    background-color: #f5f5f5;
    width: 120rpx;
    line-height: 60rpx;
    border-radius: 10rpx;
    text-align: center;
  }
  .statusTag.select {
    background-color: #d0f7ff;
    color: $color-primary;
  }
</style>
